import React, { Component } from "react";
import {
  Tabs,
  Switch,
  Input,
  Button,
  Table,
  Icon,
  Modal,
  Checkbox,
  Collapse,
} from "antd";

import LinkButton from "../../../components/link-button";
const { Panel } = Collapse;
const { TabPane } = Tabs;
const { Search } = Input;
const ButtonGroup = Button.Group;

class retrieve extends Component {
  constructor(props) {
    super(props);
    this.state = {
      visible: false,
      visible1: false,
      visible2: false,
    };
  }
  showModal = () => {
    this.setState({
      visible: true,
    });
  };
  showModal1 = () => {
    this.setState({
      visible1: true,
    });
  };
  showModal2 = () => {
    this.setState({
      visible2: true,
    });
  };
  handleOk = (e) => {
    console.log(e);
    this.setState({
      visible: false,
    });
  };
  handleOk1 = (e) => {
    console.log(e);
    this.setState({
      visible1: false,
    });
  };
  handleOk2 = (e) => {
    console.log(e);
    this.setState({
      visible2: false,
    });
  };
  handleCancel = (e) => {
    console.log(e);
    this.setState({
      visible: false,
    });
  };
  handleCancel1 = (e) => {
    console.log(e);
    this.setState({
      visible1: false,
    });
  };
  handleCancel2 = (e) => {
    console.log(e);
    this.setState({
      visible2: false,
    });
  };
  render() {
    const columns = [
      {
        title: "流量筛选规则",
        dataIndex: "name",
      },
      {
        title: "指定协议",
        dataIndex: "agreement",
      },
      {
        title: "生效策略方式",
        dataIndex: "way",
      },
      {
        title: "状态",
        dataIndex: "status",
        render: () => <Switch />,
      },
      {
        title: "操作",
        dataIndex: "operation",
        render: () => (
          <span>
            <LinkButton>编辑</LinkButton>&nbsp;&nbsp;
            <LinkButton>删除</LinkButton>
          </span>
        ),
      },
    ];
    const columns1 = [
      {
        title: "密码",
        dataIndex: "name",
        width: "65%",
      },

      {
        title: "状态",
        dataIndex: "status",
        render: () => <Switch />,
      },
      {
        title: "操作",
        dataIndex: "operation",
        render: () => (
          <span>
            <LinkButton>编辑</LinkButton>&nbsp;&nbsp;
            <LinkButton>删除</LinkButton>
          </span>
        ),
      },
    ];
    const data = [
      {
        key: "1",
        name: "192.168.33.200",
        agreement: "",
        way: "采集",
      },
      {
        key: "2",
        name: "192.168.33.400",
        agreement: "",
        way: "采集",
      },
      {
        key: "3",
        name: "192.168.33.500",
        agreement: "",
        way: "过滤",
      },
      {
        key: "4",
        name: "192.168.33.51",
        agreement: "",
        way: "过滤",
      },
    ];
    const data1 = [
      {
        key: "1",
        name: "192.168.33.200",
      },
      {
        key: "2",
        name: "192.168.33.400",
      },
      {
        key: "3",
        name: "192.168.33.500",
      },
      {
        key: "4",
        name: "192.168.33.51",
      },
    ];

    // rowSelection object indicates the need for row selection
    const rowSelection = {
      onChange: (selectedRowKeys, selectedRows) => {
        console.log(
          `selectedRowKeys: ${selectedRowKeys}`,
          "selectedRows: ",
          selectedRows
        );
      },
      getCheckboxProps: (record) => ({
        name: record.name,
      }),
    };
    const rowSelection1 = {
      onChange: (selectedRowKeys, selectedRows) => {
        console.log(
          `selectedRowKeys: ${selectedRowKeys}`,
          "selectedRows: ",
          selectedRows
        );
      },
      getCheckboxProps: (record) => ({
        name: record.name,
      }),
    };
    return (
      <div>
        <Tabs defaultActiveKey="1">
          <TabPane tab="流量采集" key="1">
            <div style={{ marginLeft: 20 }}>
              <div
                style={{ height: "70px", borderBottom: "1px solid #ececec" }}
              >
                <span>采集策略总开关:</span>
                <Switch
                  checkedChildren="开启"
                  unCheckedChildren="关闭"
                  defaultChecked
                  style={{ margin: "0 10px" }}
                />
                <span
                  style={{
                    display: "inline-block",
                    padding: "5px",
                    background: "#F0FFFF",
                    border: "1px solid #00BFFF",
                    marginTop: "4px",
                  }}
                >
                  默认开启，配置流量的过滤和采集策略
                </span>
              </div>
              <div style={{ height: 120, borderBottom: "1px solid #ececec" }}>
                <div style={{ marginTop: 20 }}>
                  &nbsp;&nbsp;&nbsp;<span>流量筛选规则:</span>&nbsp;&nbsp;
                  <Search
                    placeholder="请输入源IP 目的IP以空格分隔"
                    onSearch={(value) => console.log(value)}
                    style={{ width: 300 }}
                  />
                </div>
                <div style={{ marginTop: "20px" }}>
                  &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;
                  <span> 应用状态:</span> &nbsp;&nbsp;
                  <ButtonGroup>
                    <Button>不限</Button>
                    <Button>开启</Button>
                    <Button>关闭</Button>
                  </ButtonGroup>
                </div>
              </div>
              <div
                style={{
                  width: 1220,
                  marginTop: 20,
                  marginBottom: 20,
                  display: "flex",
                  justifyContent: "space-between",
                }}
              >
                <div>
                  <Button>导出</Button>&nbsp;&nbsp;
                  <Button>导出所有</Button>&nbsp;&nbsp;
                  <Button>启用</Button>&nbsp;&nbsp;
                  <Button>禁用</Button>&nbsp;&nbsp;
                  <Button>删除</Button>
                </div>
                <div>
                  <Button type="primary" onClick={this.showModal}>
                    + 新增
                  </Button>
                  &nbsp;&nbsp;
                  <span
                    style={{
                      display: "inline-block",
                      fontSize: 20,
                      marginTop: 10,
                    }}
                  >
                    <Icon type="setting" />
                  </span>
                </div>
              </div>
              <div>
                <Table
                  rowSelection={rowSelection}
                  columns={columns}
                  dataSource={data}
                />
              </div>
            </div>
          </TabPane>
          <TabPane tab="弱口令策略" key="2">
            <div style={{ margin: "5px 0 0 20px" }}>
              <p style={{ fontSize: 15, fontWeight: "bold" }}>检测规则</p>
              <p>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <Checkbox />
                &nbsp; WEB弱口令&nbsp;
                <Checkbox />
                &nbsp; FTP弱口令&nbsp;
                <Checkbox />
                &nbsp; 邮箱账号（SMTP）弱口令&nbsp;
                <Checkbox />
                &nbsp; 邮箱账号（POP3）弱口令&nbsp;
                <Checkbox />
                &nbsp; 邮箱账号（IMAP）弱口令
              </p>
              <p style={{ fontSize: 15, fontWeight: "bold" }}>检测字典</p>
              <p>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <Checkbox />
                &nbsp; 空口令&nbsp;
                <Checkbox />
                &nbsp; 用户名和密码相同&nbsp;
                <Checkbox />
                &nbsp; 长度小于等于8位纯数字&nbsp;
                <Checkbox />
                &nbsp; 长度小于等于8位纯字母&nbsp;
                <Checkbox />
                &nbsp; 长度小于等于6位数字和字母 &nbsp;
                <Checkbox />
                &nbsp; 弱口令列表（上限1000个）
              </p>

              <p style={{ marginTop: 30 }}>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <span>Base64编码器口令检测&nbsp;</span>
                <Switch
                  checkedChildren="开启"
                  unCheckedChildren="关闭"
                  defaultChecked
                />
                &nbsp;&nbsp;
                <span
                  style={{
                    padding: 5,
                    background: "#F0FFFF",
                    border: "1px solid #00BFFF",
                  }}
                >
                  默认关闭，开启后弱口令列表既支持明文检索，同时支持Base64编码检测
                </span>
              </p>
              <p style={{ marginTop: 20 }}>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <span>md5散列弱口令检测&nbsp;</span>
                <Switch
                  checkedChildren="开启"
                  unCheckedChildren="关闭"
                  defaultChecked
                />
                &nbsp;&nbsp;
                <span
                  style={{
                    padding: 5,
                    background: "#F0FFFF",
                    border: "1px solid #00BFFF",
                  }}
                >
                  默认关闭，开启后弱口令列表既支持明文检索，同时支持md5编码检测
                </span>
              </p>
              <Collapse>
                <Panel header="新增" key="1">
                  <p>
                    <span>弱口令：</span>
                    <Input style={{ width: 200 }} />
                  </p>
                  <div>
                    &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;
                    &nbsp;&nbsp;&nbsp;&nbsp;
                    <Button>保存</Button>&nbsp;&nbsp;
                    <Button>取消</Button>
                  </div>
                </Panel>
              </Collapse>
              <div
                style={{
                  marginTop: 10,
                  marginBottom: 10,
                  display: "flex",
                  justifyContent: "space-between",
                }}
              >
                <div>
                  <Button onClick={this.showModal1}>导入</Button>&nbsp;&nbsp;
                  <Button onClick={this.showModal2}>导出所有</Button>
                  &nbsp;&nbsp;
                  <Button>启用</Button>&nbsp;&nbsp;
                  <Button>禁用</Button>&nbsp;&nbsp;
                  <Button>删除</Button>
                </div>
                <div>
                  <Button>恢复出厂设置</Button>&nbsp;
                  <Input
                    style={{ width: 200 }}
                    placeholder="请输入密码（模糊查询）"
                  />
                </div>
              </div>

              <Table
                rowSelection={rowSelection1}
                columns={columns1}
                dataSource={data1}
              />
            </div>
          </TabPane>
          <TabPane tab="暴力破解" key="3">
            <div style={{ margin: "10px 0 0 20px" }}>
              <p>
                暴力破解：
                <Switch
                  checkedChildren="开启"
                  unCheckedChildren="关闭"
                  defaultChecked
                />
                &nbsp;&nbsp;
                <span
                  style={{
                    display: "inline-block",
                    padding: 5,
                    background: "#F0FFFF",
                    border: "1px solid #00BFFF",
                  }}
                >
                  默认开启，开启暴力破解检测引擎
                </span>
              </p>
              <div>
                <p style={{ fontSize: 15, fontWeight: "bold" }}>Web暴力破解</p>
                <p>
                  <span> Web暴力破解（尝试）：</span>
                  <Switch
                    checkedChildren="开启"
                    unCheckedChildren="关闭"
                    defaultChecked
                  />
                  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                  <span>尝试阈值：</span>&nbsp;&nbsp;
                  <Input style={{ width: 70 }} value="100" />
                  &nbsp;&nbsp;
                  <span>次</span>&nbsp;&nbsp;
                  <Button>保存</Button>&nbsp;&nbsp;&nbsp;&nbsp;
                  <span
                    style={{
                      display: "inline-block",
                      width: "600px",
                      padding: "5px",
                      background: "#F0FFFF",
                      border: "1px solid #00BFFF",
                    }}
                  >
                    5~500次/1分，<b style={{ color: "red" }}>相同IP</b>，
                    <b style={{ color: "red" }}>相同站点</b>的
                    <b style={{ color: "red" }}>用户名密码组合不同</b>
                    时，每分钟尝试登录次数达到警告阈值
                  </span>
                </p>
              </div>
              <div>
                <p>
                  <span> Web暴力破解（失败）：</span>
                  <Switch
                    checkedChildren="开启"
                    unCheckedChildren="关闭"
                    defaultChecked
                  />
                  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                  <span>尝试阈值：</span>&nbsp;&nbsp;
                  <Input style={{ width: 70 }} value="5" />
                  &nbsp;&nbsp;
                  <span>次</span>&nbsp;&nbsp;
                  <Button>保存</Button>&nbsp;&nbsp;&nbsp;&nbsp;
                  <span
                    style={{
                      display: "inline-block",
                      width: "600px",
                      padding: "5px",
                      background: "#F0FFFF",
                      border: "1px solid #00BFFF",
                    }}
                  >
                    5~500次/1分，<b style={{ color: "red" }}>相同IP</b>，
                    <b style={{ color: "red" }}>相同站点</b>
                    ,每分钟尝试登录次数达到警告阈值
                  </span>
                </p>
              </div>
              <div>
                <p>
                  <span>
                    &nbsp;
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    Web暴力破解：
                  </span>
                  <Switch
                    checkedChildren="开启"
                    unCheckedChildren="关闭"
                    defaultChecked
                  />
                  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                  <span>尝试阈值：</span>&nbsp;&nbsp;
                  <Input style={{ width: 70 }} value="5" />
                  &nbsp;&nbsp;
                  <span>次</span>&nbsp;&nbsp;
                  <Button>保存</Button>&nbsp;&nbsp;&nbsp;&nbsp;
                  <span
                    style={{
                      display: "inline-block",
                      width: "600px",
                      padding: "5px",
                      background: "#F0FFFF",
                      border: "1px solid #00BFFF",
                    }}
                  >
                    5~500次/1分，<b style={{ color: "red" }}>相同IP</b>，
                    <b style={{ color: "red" }}>相同站点</b>和
                    <b style={{ color: "red" }}> 密码不同时</b>
                    ,每分钟尝试登录次数达到警告阈值
                  </span>
                </p>
              </div>
              <div>
                <Collapse>
                  <Panel header="Web暴力破解来源IP白名单" key="1">
                    <p>
                      <span>来源：</span>
                      <Input style={{ width: 200 }} />
                    </p>
                    <div>
                      &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;
                      &nbsp;&nbsp;&nbsp;&nbsp;
                      <Button>保存</Button>&nbsp;&nbsp;
                      <Button>取消</Button>
                    </div>
                  </Panel>
                </Collapse>
              </div>
            </div>
          </TabPane>
        </Tabs>
        {/* 流量采集新增 */}
        <Modal
          title="添加流量采集策略"
          visible={this.state.visible}
          onOk={this.handleOk}
          onCancel={this.handleCancel}
        >
          <p
            style={{
              padding: 5,
              border: "1px solid 	#FFFF00",
              background: "#FFEFD5",
            }}
          >
            <Icon type="exclamation-circle" />
            &nbsp;&nbsp;
            <span>对符合条件的流量将不做检测与审计</span>
          </p>
          <p>
            <span>策略方式:</span>&nbsp;&nbsp;
            <Checkbox />
            &nbsp;过滤&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <Checkbox />
            &nbsp;采集
          </p>
          <p style={{ height: 50, textAlign: "center", lineHeight: "50px" }}>
            <span>参数策略类型:</span>&nbsp;&nbsp;
            <Checkbox />
            &nbsp; 按单个IP地址&nbsp;&nbsp;&nbsp;&nbsp;
            <Checkbox />
            &nbsp; 按一个IP地址&nbsp;&nbsp;&nbsp;&nbsp;
            <Checkbox />
            &nbsp; 指定协议过滤
          </p>
          <p>
            &nbsp;&nbsp;
            <span>IP:</span>&nbsp;&nbsp;
            <Input style={{ width: 300 }} />
          </p>
        </Modal>
        {/* 弱口令导入 */}
        <Modal
          title="弱口令："
          visible={this.state.visible1}
          onOk={this.handleOk1}
          onCancel={this.handleCancel1}
        >
          <p>
            <span>文件上传：</span>
            <Input style={{ width: 240 }} />
            &nbsp;
            <Button>选择文件</Button>&nbsp;
            <LinkButton>模板下载</LinkButton>
          </p>
          <p>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <Checkbox />
            &nbsp; 增量导入
            <Checkbox />
            &nbsp; 替换导入
          </p>
        </Modal>
        {/* 弱口令导出所有 */}
        <Modal
          title="弱口令："
          visible={this.state.visible2}
          onOk={this.handleOk2}
          onCancel={this.handleCancel2}
        >
          <p>
            <span>文件下载：</span>
            <Input style={{ width: 240 }} />
            &nbsp;
            <Button>选择文件夹</Button>&nbsp;
          </p>
        </Modal>
      </div>
    );
  }
}

export default retrieve;
